<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>角色管理</title>

    <!--[if IE 7]>
    <link rel="stylesheet" href="../../css/font-awesome-ie7.min.css"/>
    <![endif]-->

    <link rel="stylesheet" href="../../css/jquery-ui-1.10.3.full.min.css"/>
    <link rel="stylesheet" href="../../css/datepicker.css"/>
    <link rel="stylesheet" href="../../css/ui.jqgrid.css"/>

    <link rel="stylesheet" href="../../css/ace.min.css"/>
    <link rel="stylesheet" href="../../css/ace-rtl.min.css"/>
    <link rel="stylesheet" href="../../css/ace-skins.min.css"/>
    <link rel="stylesheet" href="../../css/plugins/iCheck/all.css">
    <link rel="stylesheet" href="../../css/plugins/jsTree/style.min.css">
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="../../css/ace-ie.min.css"/>
    <![endif]-->

    <script src="../../js/date-time/bootstrap-datepicker.min.js"></script>

    <%-- icheck --%>
    <script src="../../js/plugins/iCheck/icheck.js"></script>
    <script src="../../js/plugins/iCheck/myiCheck.js"></script>
    <%-- 分页插件 --%>
    <script type="text/javascript" src="../../js/plugins/jqPaginator/jqPaginator.js"></script>
    <%-- ajax form ajax submit --%>
    <script type="text/javascript" src="../../js/plugins/form/jquery.form.js"></script>
    <%-- jstree --%>
    <script type="text/javascript" src="../../js/plugins/jsTree/jstree.min.js"></script>

    <script type="text/javascript" src="../../modules/auth/role.js"></script>


</head>
<body>

<div class="main-content">
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try {
                ace.settings.check('breadcrumbs', 'fixed')
            } catch (e) {
            }
        </script>

        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i><a href="#">后台系统权限</a>
            </li>
            <li class="active">角色管理</li>
        </ul>
        <!-- .breadcrumb -->

        <div class="nav-search" id="nav-search">
            <form class="form-search">
				<span class="input-icon">
					<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input"
                           autocomplete="off"/>
					<i class="icon-search nav-search-icon"></i>
				</span>
            </form>
        </div>
        <!-- #nav-search -->
    </div>

    <div class="page-content">
        <div class="row">
            <div class="col-xs-12">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        角色列表
                        <div class="pull-right" style="margin-right: 20px;margin-top: -7px;">
                            <shiro:hasPermission name="role:add">
                                <button class="btn btn-success btn-sm" type="button" data-toggle="modal" data-target="#addRole">
                                    <span class="icon-zoom-in bigger-130"></span><strong>新增记录</strong>
                                </button>
                            </shiro:hasPermission>
                            <shiro:hasPermission name="role:delete">
                                <button class="btn btn-danger btn-sm ml10" type="button" onclick="deleteData()">
                                    <span class="icon-trash bigger-130"></span><strong>批量删除</strong>
                                </button>
                            </shiro:hasPermission>
                        </div>
                    </div>
                    <div class="panel-body">
                        <table id="pageInfoData" class="table table-hover table-bordered table-striped">
                            <thead>
                            <tr>
                                <th width="58"><input type="checkbox" id="chkAll" name="chkAll"></th>
                                <th>ID</th>
                                <th>角色名称</th>
                                <th>别名</th>
                                <th>英文名称</th>
                                <th>角色描述</th>
                                <th>创建时间</th>
                                <th width="150">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${pageInfo.list}" var="data">
                                <tr>
                                    <td class="t_c"><input type="checkbox" name="chkList"></td>
                                    <td class="t_c">${data.id}</td>
                                    <td class="t_c">${data.name}</td>
                                    <td class="t_c">${data.aliases}</td>
                                    <td class="t_c">${data.enName}</td>
                                    <td class="t_c">${data.remark}</td>
                                    <td class="t_c">
                                        <fmt:formatDate value="${data.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                    </td>
                                    <td class="t_c">
                                        <div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
                                            <a class="green" href="#" data-toggle="modal" data-target="#editRole"
                                               data-whatever="${data.id}"> <i class="icon-pencil bigger-130"></i></a>
                                            <a class="red" href="#"> <i class="icon-trash bigger-130"></i></a>
                                        </div>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                    <div class="panel-footer">
                        <div class="row" style="line-height: initial;">
                            <div class="col-xs-5" style="padding-top: 10px;">
                                <span id="pageInfo"></span>
                            </div>
                            <div class="col-xs-7">
                                <div class="dataTables_paginate paging_bootstrap">
                                    <ul class="pagination" id="pagination"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <%-- 添加用户弹出层 --%>
        <div class="modal fade" id="addRole" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <form role="form" action="/role/add" method="post" id="addRoleForm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="exampleModalLabel">添加角色</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">角色名称:</label>
                                        <input type="text" class="form-control" name="name" required placeholder="角色名称">
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">别名:</label>
                                        <input type="text" class="form-control" name="aliases" required
                                               placeholder="别名">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">英文名称:</label>
                                        <input type="text" class="form-control" name="enName" required
                                               placeholder="英文名称">
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">备注:</label>
                                        <input type="text" class="form-control" name="remark" required placeholder="备注">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">确认</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <%-- 修改用户弹出层 --%>
        <div class="modal fade" id="editRole" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabe2">
            <div class="modal-dialog" role="document">
                <form role="form" action="/role/edit" method="post" id="editRoleForm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="exampleModalLabe2">修改角色</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <input type="text" class="form-control" name="id" id="edit_id" style="display: none;">

                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">角色名称:</label>
                                        <input type="text" class="form-control" name="name" id="edit_name" required
                                               placeholder="角色名称">
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">别名:</label>
                                        <input type="text" class="form-control" name="aliases" id="edit_aliases"
                                               required placeholder="别名">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">英文名称:</label>
                                        <input type="text" class="form-control" name="enName" id="edit_enName" required
                                               placeholder="英文名称">
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label class="control-label">备注:</label>
                                        <input type="text" class="form-control" name="remark" id="edit_remark" required
                                               placeholder="备注">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">确认</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>


        <%-- 角色授权弹出层 --%>
        <div class="modal fade" id="roleAddAuth" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabe3">
            <div class="modal-dialog" role="document">
                <form role="form" action="/role/addResource" method="post" id="roleAddAuthForm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="exampleModalLabe3">角色授权</h4>
                        </div>
                        <div class="modal-body">
                            <input type="text" class="form-control" name="id" id="role_auth_id" style="display: none;">
                            <div id="authTree"></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" onclick="addResource()">确认</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        verifyHasAdminPermission();
        $("#pagination").jqPaginator({
            totalPages: 1,
            visiblePages: 7,
            currentPage: 1,
            first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
            prev: '<li class="prev"><a href="javascript:void(0);"><i class="arrow arrow2"><\/i>上一页<\/a><\/li>',
            next: '<li class="next"><a href="javascript:void(0);">下一页<i class="arrow arrow3"><\/i><\/a><\/li>',
            last: '<li class="last"><a href="javascript:void(0);">末页<\/a><\/li>',
            page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
            onPageChange: function (pageNum, type) {
                page(pageNum);
            }
        });
    });
</script>
</body>
</html>